/**
 * Created by Administrator on 2017/6/30.
 */

import React from 'react'
import {View,StyleSheet,Text,Image,TouchableOpacity} from 'react-native'
import ImagePicker from 'react-native-image-picker'

export default class UserInfo extends React.Component{

    state = {
        avatarSource: null,
        videoSource: null
    };

    selectPhotoTapped() {
        const options = {
            quality: 1.0,
            maxWidth: 500,
            maxHeight: 500,
            storageOptions: {
                skipBackup: true
            },
            title:'选择照片',
            cancelButtonTitle:'取消',
            takePhotoButtonTitle:'拍照',
            chooseFromLibraryButtonTitle:'相册'
        };

        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);
            console.log('path:',response.path)
            if (response.didCancel) {
                console.log('User cancelled photo picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                let source = { uri: response.uri };

                // You can also display the image using data:
                // let source = { uri: 'data:image/jpeg;base64,' + response.data };

                this.setState({
                    avatarSource: source
                });
            }
        });
    }

    render(){
        return(
            <View style={styles.content}>
                <View style={styles.item_head}>
                    <Text style={styles.testStyLeft}>头像</Text>
                    <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
                            <Image style={styles.imageStyle} source={this.state.avatarSource === null ? require('../.././Img/head_default.png'):this.state.avatarSource} />
                    </TouchableOpacity>

                </View>

                <View style={{height:1,marginRight:16,marginLeft:16,backgroundColor:'#e3e3e3'}}/>
                <View style={styles.item_content}>
                    <Text style={styles.testStyLeft}>姓名</Text>
                    <Text style={styles.testStyRight}>伊斯塔里战神</Text>
                </View>

                <View style={{height:1,marginRight:16,marginLeft:16,backgroundColor:'#e3e3e3'}}/>
                <View style={styles.item_content}>
                    <Text style={styles.testStyLeft}>手机号</Text>
                    <Text style={styles.testStyRight}>18328676067</Text>
                </View>

                <View style={{height:1,marginRight:16,marginLeft:16,backgroundColor:'#e3e3e3'}}/>
                <View style={styles.item_content}>
                    <Text style={styles.testStyLeft}>性别</Text>
                    <Text style={styles.testStyRight}>帅气的男孩</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    imageStyle:{
        width:60,
        height:60,
        borderRadius:45,
        marginRight:12
    },
    testStyLeft:{
        fontSize:15,
        marginLeft:12
    },
    testStyRight:{
        fontSize:15,
        marginRight:12
    },
    content:{
        flex:1,
        backgroundColor:'#fff',
    },
    item_content:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        height:50
    },
    item_head:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        height:80
    }
})